import React from 'react'
import { Button, NavBar, ResultPage, Tabs } from 'antd-mobile'
import styles from './css/home.module.css'
import { LoopOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
const Home = () => {
    const nav= useNavigate()

    const city=localStorage.getItem('city') || []
    return (
        <div>
             <NavBar back={city} onBack={()=> nav("/city")} backIcon={false}>首页</NavBar>
            <ResultPage
                status=''
                title=''
                description=''
            >
                <ResultPage.Card style={{ height: 200, padding: 8 }}>
                    <Tabs>
                        <Tabs.Tab title='国内火车' key='fruits'>
                            <div className={styles.row}>
                                <span className={styles.start}>北京</span>
                                <LoopOutline fontSize={22} />
                                <span className={styles.end}>上海</span>
                            </div>
                            <div className={styles.row}>
                                {/* <CalendarPickerView /> */}
                            </div>
                            <div className={styles.row}>
                                <Button block color='primary' size='large'>
                                    搜索
                                </Button>
                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='机票' key='vegetables'>
                            机票
                        </Tabs.Tab>
                        <Tabs.Tab title='船票' key='animals'>
                            船票
                        </Tabs.Tab>
                    </Tabs>
                </ResultPage.Card>


            </ResultPage>
        </div>
    )
}

export default Home
